<!-- 设备管理-设备列表-附属设备/附件tab-设备选择弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="添加设备" width="1280px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="设备ID/名称">
              <px-input
                v-model="queryParams.value"
                placeholder="设备ID/名称"
                maxlength="50"
                clearable
                @blur="queryParams.value = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipCategorySelect :className="queryParams.className" :categoryId="queryParams.categoryId" @changeCategory="changeCategory" />
          </px-col>
          <px-col :span="6">
            <EquipTypeSelect
              :className="queryParams.className"
              :categoryId="queryParams.categoryId"
              :typeId="queryParams.typeId"
              @changeType="changeType"
            />
          </px-col>
          <px-col :span="6">
            <div class="equip-dialog-btn">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </div>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" height="240" border @selection-change="selectionChange">
        <px-table-column type="selection" width="40" align="center" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="queryTable"
      />
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="handleSubmit">确定</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { queryEquipLedger } from "@/api/equip/archive";
import { PxMessage } from "px-ui";
import { computed, reactive, toRefs } from "vue";
import EquipCategorySelect from "@/views/all/equip/components/EquipCategorySelect.vue";
import EquipTypeSelect from "@/views/all/equip/components/EquipTypeSelect.vue";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog", "addEquipTable"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "className"]);
const visible = computed(() => props.dialogVisible);
// 页面本身的值
const state = reactive<any>({
  queryParams: {
    value: "",
    categoryId: null,
    typeId: null,
    pageNum: 1,
    pageSize: 10
  },
  tableColumns: [
    { prop: "eqpId", label: "设备ID", minWidth: "120", showOverflowTooltip: true },
    { prop: "eqpName", label: "设备名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "180", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  selectTable: []
});
const { queryParams, tableColumns, tableData, total, selectTable } = toRefs(state);
// 查询设备列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await queryEquipLedger(params);
  tableData.value = data.data || [];
  total.value = data.total;
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  queryParams.value.value = "";
  queryParams.value.className = props.className;
  queryParams.value.categoryId = null;
  queryParams.value.typeId = null;
  queryTable();
};
// 表格多选框选中
const selectionChange = (val: any) => {
  selectTable.value = val;
};
// 确定选择设备
const handleSubmit = () => {
  if (selectTable.value && selectTable.value.length === 0) {
    PxMessage.warning("请选择设备");
    return;
  }
  emits("closeDialog");
  emits("addEquipTable", selectTable.value);
};

// 打开弹窗
const openDialog = () => {
  selectTable.value = [];
  queryParams.value = {
    value: "",
    className: props.className,
    categoryId: null,
    typeId: null,
    pageNum: 1,
    pageSize: 10
  };
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};

// 外部封装好的组件
// 改变设备总称，清空设备类型和设备型号
const changeCategory = val => {
  queryParams.value.categoryId = val;
  queryParams.value.typeId = null;
};
// 改变设备类型，清空设备型号
const changeType = (val, val2) => {
  queryParams.value.categoryId = val2;
  queryParams.value.typeId = val;
};
</script>
<style lang="scss" scoped>
.equip-dialog-wrap {
  .equip-dialog-content {
    :deep(.px-form) {
      width: 100%;

      .px-form-item {
        width: 100%;
        margin-right: 0;

        .px-input {
          width: 100%;
        }

        .px-select {
          width: 100%;
        }

        .px-select-v2 {
          width: 100%;
        }
      }
    }

    .equip-dialog-btn {
      :deep(.px-button + .px-button) {
        margin-left: 8px;
      }
    }

    .equip-table {
      --px-table-border-color: #dfdfdf;

      :deep(.px-table__header) {
        thead {
          tr {
            background-color: #e7eefb !important;

            th {
              font-size: 13px;
              font-weight: bold;
              color: #000;
              background-color: #e7eefb !important;
            }
          }
        }
      }
      :deep(.px-table__cell) {
        padding: 0;
        height: 36px;
        line-height: 36px;

        .cell {
          height: 36px;
          line-height: 36px;
        }
      }
    }

    :deep(.px-pagination) {
      right: 32px;
    }
  }
}
</style>
